<html>
<head>
    <meta charset="utf-8"/>
    <title>任务估时</title>
    <style>
        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            width: 11000px;
        }

        table th {
            border: 1px solid blue;
            color: red;
        }

        table td {
            border: 1px solid blue;
        }

        .header2 {
            background: #04ff00;
        }

        .header3 {
            background: yellow;
        }

        .dataValue {
            background: #00e1ff;
        }

        .weekendNoValue {
            background: #a0a0a0;
        }

        .weekendValue {
            background: #a0a0a0;
            color: red;
        }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        (function ($) {
            //扩展方法获取url参数
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
            //得到url参数
            var urltype = $.getUrlParam('p');
        })(jQuery);

        function clickBtn(btn) {
            window.history.go(-1);
        }

        var weekends = [];

        function drawHeader(data) {
            var html = "<th>ID</th><th>P_ID</th><th>任务标题</th>";
            for (idx in data.values) {
                var day = data.values[idx];
                html += "<th>" + day + "</th>";
                weekends[idx] = day.endsWith("周六") || day.endsWith("周日");
            }
            console.log(weekends)
            return "<tr>" + html + "</tr>";
        }

        function drawData(data) {
            var trClazz = '';
            var isData = false;
            if ("dayCount" === data.id) {
                trClazz = 'header2';
            } else if ("dayCount" === data.pId) {
                trClazz = 'header3';
            } else {
                isData = true;
            }

            var html = "<td>" +
                data.id +
                "</td><td>" +
                data.pId +
                "</td><td>" +
                data.title +
                "</td>";
            for (idx in data.values) {
                var dataValue = data.values[idx];
                if (weekends[idx]) {
                    if ("0" !== dataValue) {
                        html += "<td class='weekendValue'>" + dataValue + "</td>";
                    } else {
                        html += "<td class='weekendNoValue'>" + dataValue + "</td>";
                    }
                } else {
                    if (isData && "0" !== dataValue) {
                        html += "<td class='dataValue'>" + dataValue + "</td>";
                    } else {
                        html += "<td>" + dataValue + "</td>";
                    }
                }
            }

            return "<tr class='" + trClazz + "'>" + html + "</tr>";
        }

        function drawTable(data, isHeader) {
            var html = isHeader ? drawHeader(data) : drawData(data);
            $("table").append($(html));
            if (data.children) {
                for (idx in data.children) {
                    drawTable(data.children[idx], false)
                }
            }
        }

        $(document).ready(function () {
            $("body").prepend(new Date());

            $.ajax({
                type: "GET",
                url: "/task/tree?sprintId=" + $.getUrlParam('sprintId'),
                success: function (data) {
                    drawTable(data, true);
                },
            });
        });
    </script>
</head>
<body>
<div style="position: relative; top: 20px;">
    <button onclick='clickBtn(this)'>返回上页</button>
    <table/>
</div>
</body>
</html>
